<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员登录 - {{ system_config.site_name|default('会员系统') }}</title>
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --light-bg: #f8f9fa;
            --card-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
        }

        body {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-container {
            animation: fadeIn 0.8s ease-out;
        }

        .login-card {
            border-radius: 16px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            background: white;
            transition: transform 0.3s ease;
        }

        .login-card:hover {
            transform: translateY(-5px);
        }

        .gradient-bg {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .gradient-bg::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transform: rotate(30deg);
        }

        .gradient-content {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .gradient-bg h2 {
            font-weight: 600;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }

        .gradient-bg p {
            opacity: 0.9;
            line-height: 1.6;
        }

        .login-content {
            padding: 2.5rem;
        }

        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .login-header h2 {
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .login-header p {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .form-control {
            border-radius: 8px;
            padding: 0.8rem 1rem;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #4a5568;
        }

        .input-group-icon {
            position: relative;
        }

        .input-group-icon .form-control {
            padding-left: 2.8rem;
        }

        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            z-index: 5;
        }

        .btn-login {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            border-radius: 8px;
            padding: 0.9rem;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(102, 126, 234, 0.4);
        }

        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: #a0aec0;
        }

        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #e2e8f0;
        }

        .divider span {
            padding: 0 1rem;
            font-size: 0.85rem;
        }

        .btn-wechat {
            background-color: #07c160;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.8rem;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-wechat:hover {
            background-color: #06ae56;
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(7, 193, 96, 0.4);
        }

        .qrcode-container {
            text-align: center;
            padding: 1.5rem;
            background: var(--light-bg);
            border-radius: 12px;
            margin-top: 1.5rem;
        }

        .qrcode-container h4 {
            margin-bottom: 1.2rem;
            color: #333;
            font-weight: 600;
        }

        .qrcode-frame {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px;
            background: white;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .link-forgot {
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.2s;
            font-size: 0.9rem;
        }

        .link-forgot:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .link-register {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s;
        }

        .link-register:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 响应式调整 */
        @media (max-width: 767.98px) {
            .gradient-bg {
                padding: 2rem 1.5rem;
                min-height: 180px;
            }

            .gradient-bg h2 {
                font-size: 1.5rem;
                margin-bottom: 1rem;
            }

            .login-content {
                padding: 2rem 1.5rem;
            }
        }

        /* 加载动画 */
        .spinner {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .btn-loading .spinner {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container login-container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                <div class="login-card">
                    <div class="row g-0">
                        <!-- 左侧渐变背景 -->
                        <div class="col-md-6 gradient-bg">
                            <div class="gradient-content">
                                <h2>欢迎使用{{ system_config.site_name|default('会员系统') }}</h2>
                                <p class="lead">
                                    使用您的账号信息登录<br>
                                    体验完整的功能服务
                                </p>
                            </div>
                        </div>

                        <!-- 右侧表单 -->
                        <div class="col-md-6">
                            <div class="login-content">
                                <div class="login-header">
                                    <h2>会员登录</h2>
                                    <p>请输入您的账号信息登录系统</p>
                                </div>

                                <!-- 显示Flash消息 -->
                                {% with messages = get_flashed_messages(with_categories=true) %}
                                    {% if messages %}
                                        {% for category, message in messages %}
                                            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                                                {{ message }}
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                {% endwith %}

                                {% if show_qrcode %}
                                <!-- 二维码登录视图 -->
                                <div class="text-center">
                                    <h4 class="mb-4">企微扫码登录</h4>
                                    <div class="qrcode-frame">
                                        <iframe src="{{ auth_url }}"
                                                width="200"
                                                height="200"
                                                frameborder="0"
                                                scrolling="no"></iframe>
                                        <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                    </div>
                                    <p class="text-muted small mb-4">请使用企业微信扫描二维码</p>
                                    <a href="{{ url_for('member.auth.login') }}" class="btn btn-outline-secondary btn-lg w-100 py-2">
                                        <i class="fas fa-arrow-left me-2"></i>返回账号登录
                                    </a>
                                </div>
                                {% else %}
                                <!-- 表单登录视图 -->
                                <form method="POST" action="{{ url_for('member.auth.login') }}" id="loginForm">
                                    {{ form.hidden_tag() }}

                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名/手机号/邮箱</label>
                                        <div class="input-group-icon">
                                            <i class="input-icon fas fa-user"></i>
                                            <input type="text"
                                                   class="form-control form-control-lg"
                                                   id="username"
                                                   name="username"
                                                   value="{{ form.username.data if form.username.data }}"
                                                   required
                                                   autofocus
                                                   placeholder="请输入您的账号">
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label for="password" class="form-label">密码</label>
                                        <div class="input-group-icon">
                                            <i class="input-icon fas fa-lock"></i>
                                            <input type="password"
                                                   class="form-control form-control-lg"
                                                   id="password"
                                                   name="password"
                                                   required
                                                   placeholder="请输入密码">
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <div class="form-check">
                                            <input type="checkbox"
                                                   class="form-check-input"
                                                   id="remember_me"
                                                   name="remember_me"
                                                   {% if form.remember_me.data %}checked{% endif %}>
                                            <label class="form-check-label" for="remember_me">记住我</label>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-login btn-lg w-100 mb-4" id="loginButton">
                                        <span class="spinner" style="display: none;"></span>
                                        <span>立即登录</span>
                                    </button>

                                    <div class="text-center mb-4">
                                        <p class="mb-0">还没有账号？ <a href="#" class="link-register">立即注册</a></p>
                                    </div>
                                </form>

                                {% if WechatConfig and WechatConfig.login_enabled %}
                                <div class="divider">
                                    <span>或使用以下方式登录</span>
                                </div>

                                <a href="{{ url_for('member.auth.login', action='wechat_login') }}"
                                   class="btn btn-wechat btn-lg w-100">
                                    <i class="fab fa-weixin me-2"></i> 企微扫码登录
                                </a>
                                {% endif %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap 5 JS和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 表单提交处理
        document.getElementById('loginForm')?.addEventListener('submit', function() {
            const button = document.getElementById('loginButton');
            button.disabled = true;
            button.querySelector('.spinner').style.display = 'inline-block';
            button.querySelector('span:last-child').textContent = '登录中...';
        });

        // 检查登录状态
        function checkLoginStatus() {
            fetch('{{ url_for("member.auth.wechat_login_callback") }}')
                .then(response => response.json())
                .then(data => {
                    if (data.logged_in) {
                        window.location.href = data.redirect_url;
                    } else if(window.location.search.includes('action=wechat_login')) {
                        setTimeout(checkLoginStatus, 3000);
                    }
                });
        }

        // 如果是扫码登录页面，开始检查登录状态
        if(window.location.search.includes('action=wechat_login')) {
            checkLoginStatus();
        }

        // 添加简单的表单验证
        const usernameField = document.getElementById('username');
        const passwordField = document.getElementById('password');

        if (usernameField && passwordField) {
            usernameField.addEventListener('blur', validateField);
            passwordField.addEventListener('blur', validateField);

            function validateField(e) {
                const field = e.target;
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                } else {
                    field.classList.remove('is-invalid');
                }
            }
        }
    </script>
</body>
</html>